<template>
  <div class="nav">
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      router
    >
      <el-menu-item :index="item['url']" v-for="(item, index) in nav1">
        <span>{{ item["text"] }}</span>
      </el-menu-item>
    </el-menu>
    <div class="btn" @click="logout">退出</div>
    <div>
      <!--    <el-menu-->
      <!--      :default-active="activeIndex2"-->
      <!--      class="el-menu-demo"-->
      <!--      mode="horizontal"-->
      <!--      @select="handleSelect"-->
      <!--      background-color="#545c64"-->
      <!--      text-color="#fff"-->
      <!--      active-text-color="#ffd04b">-->
      <!--      <el-menu-item index="1">处理中心</el-menu-item>-->
      <!--      <el-submenu index="2">-->
      <!--        <template slot="title">我的工作台</template>-->
      <!--        <el-menu-item index="2-1">选项1</el-menu-item>-->
      <!--        <el-menu-item index="2-2">选项2</el-menu-item>-->
      <!--        <el-menu-item index="2-3">选项3</el-menu-item>-->
      <!--        <el-submenu index="2-4">-->
      <!--          <template slot="title">选项4</template>-->
      <!--          <el-menu-item index="2-4-1">选项1</el-menu-item>-->
      <!--          <el-menu-item index="2-4-2">选项2</el-menu-item>-->
      <!--          <el-menu-item index="2-4-3">选项3</el-menu-item>-->
      <!--        </el-submenu>-->
      <!--      </el-submenu>-->
      <!--      <el-menu-item index="3" disabled>消息中心</el-menu-item>-->
      <!--      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
      <!--    </el-menu>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "0",
      activeIndex2: "1",
      aad: false,
      nav1: [
        {
          text: "个人中心",
          url: "/index/myIndex",
        },
        {
          text: "商城首页",
          url: "/index/index",
        },
        {
          text: "购物车",
          url: "/index/mycar",
        },
        {
          text: "我的订单",
          url: "/index/ordering",
        },
      ],
    };
  },
  watch: {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$confirm("此操作将退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "您已退出登录!",
            onClose: () => {
              console.log(77); //此处写提示关闭后需要执行的函数
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "您取消退出",
          });
        });
    },
  },
};
</script>
<style scoped lang="less">
.nav {
  .el-menu-demo {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .btn {
    position: absolute;
    right: 15%;
    top: 3%;
    width: 3.6rem;
    height: 2.3rem;
    text-align: center;
    line-height: 2.3rem;
    background: #fff;
    font-size: 1rem;
    border: 1px solid #fb7299;
    background: #fff;
    color: #fb7299;
    border-radius: 5px;
  }
}
</style>
